<template>
  <div v-loading="isloading" class="empower-container">
    <div class="over-header">
      <div class="header"><i class="el-icon-d-arrow-right"></i>按条件筛选</div>

      <div style="display: flex; align-items: center;margin:10px">
        <el-input
          v-model="listquery.key"
          clearable
          placeholder="标题内容"
          style="width: 200px; margin-right: 10px"
        ></el-input>
        <el-date-picker
          style="width: 370px; margin-right: 10px"
          v-model="valueData"
          clearable
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="filter-item"
          value-format="yyyy-MM-dd"
        />
        <el-select
          v-model="listquery.ListType"
          placeholder="回执状态"
          clearable
          style="width: 200px; margin-right: 10px"
        >
          <el-option label="未回执" value="1"> </el-option>
          <el-option label="已回执" value="2"> </el-option>
          <el-option label="全部" value=""> </el-option>
        </el-select>
        <el-button type="success" icon="el-icon-search" @click="search"
          >搜索</el-button
        >
        <el-button type="warning" icon="el-icon-refresh-left" @click="reset"
          >重置</el-button
        >
      </div>
    </div>
    <div class="tableheader">
      <div class="header">
        <i class="el-icon-d-arrow-right"></i>问题反馈记录
      </div>
      <el-button
        type="success"
        plain
        style="margin-right: 5px"
        @click="addcityquestion"
      >
        <i class="el-icon-plus"></i>新增
      </el-button>
    </div>

    <el-table
      :data="tableData"
      stripe
      border
      tooltip-effect="dark"
      style="width: 100%"
      class="eltable"
    >
      <el-table-column label="序号" width="80" type="index" />
      <el-table-column prop="feedbackTitle" label="问题标题" />
      <el-table-column prop="feedbackTime" label="提出问题时间" width="200" />
      <el-table-column label="回执状态" width="180">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.receiptUserId">已回复</el-tag>
          <el-tag type="danger" v-else>未处理</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" width="350">
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="searchquestion(scope.row)"
            v-if="scope.row.receiptUserId"
          >
            <i class="el-icon-search"></i>查看
          </el-button>
          <el-button
            type="warning"
            @click="editquestion(scope.row)"
            v-if="!scope.row.receiptUserId"
          >
            <i class="el-icon-edit"></i>编辑
          </el-button>
          <el-button
            type="danger"
            @click="handleDelete(scope.row.id)"
            v-if="!scope.row.receiptUserId"
          >
            <i class="el-icon-delete"></i>删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="tableData.length > 0"
      class="elpagi"
      :total="total"
      @size-change="getdata"
      @current-change="getdata"
      @prev-click="getdata"
      @next-click="getdata"
      :current-page.sync="listquery.currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size.sync="listquery.pageSize"
      layout="total,sizes, prev, pager, next, jumper"
    />
    <el-dialog
      :title="dialogStatus == 'add' ? '市县问题新增' : '市县问题编辑'"
      :visible.sync="isDialogShow"
      width="50%"
      :append-to-body="true"
      class="dialog1"
    >
      <el-form
        ref="feedbackform"
        :model="feedbackform"
        label-width="150px"
        label-position="left"
      >
        <div class="feedtitle">问题详情</div>
        <el-form-item label="标题:">
          <el-input v-model="feedbackform.feedbackTitle" />
        </el-form-item>
        <el-form-item label="内容:">
          <el-input
            v-model="feedbackform.feedbackMessage"
            type="textarea"
            :rows="6"
          />
        </el-form-item>

        <el-form-item label="附件材料:">
          <el-upload
            ref="upload"
            class="upload-demo demo1"
            action=""
            multiple
            :show-file-list="true"
            :file-list="fileList"
            :http-request="fileSubmit"
            :on-change="fileChange"
            :on-remove="fileRemove"
          >
            <div class="wrap" style="color: #4778c7">
              <span class="fujian"
                ><i class="el-icon-paperclip"></i>添加附件</span
              >
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item v-if="flist.length > 0">
          <span slot="label">
            <span class="span-box">
              <span> 历史附件: </span>
            </span>
          </span>
          <ul class="infinite-list" style="overflow: auto">
            <li v-for="i in flist" class="infinite-list-item" :key="i">
              <a :href="sethref(i)" class="feedhover">{{ i }}</a>
              <span class="close" @click="closeli(i)"
                ><i class="el-icon-close"></i
              ></span>
            </li>
          </ul>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isDialogShow = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogStatus === 'add' ? addquestion('form') : updateData()"
          >提交</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="问题回复详情"
      :visible.sync="receptDialogShow"
      width="70%"
      :append-to-body="true"
      class="dialog1"
    >
      <el-form
        ref="feedbackform"
        :model="feedbackform"
        label-width="150px"
        label-position="left"
      >
        <el-row>
          <el-col
            :sm="12"
            :md="12"
            :lg="12"
            :xl="12"
            style="padding-right: 25px"
          >
            <div class="feedtitle">问题详情</div>
            <el-form-item label="标题:">
              <span>{{ feedbackform.feedbackTitle }}</span>
            </el-form-item>
            <el-form-item label="内容:">
              <div style="max-height: 155px; overflow: auto">
                {{ feedbackform.feedbackMessage }}
              </div>
            </el-form-item>
            <el-form-item label="问题反馈地区:">
              <span>{{ feedbackform.feedbackUserName }}</span>
            </el-form-item>
            <el-form-item label="反馈日期:">
              <span>{{ feedbackform.feedbackTime }}</span>
            </el-form-item>
            <el-form-item label="附件列表:">
              <ul class="infinite-list" style="overflow: auto">
                <li v-for="i in flist" class="infinite-list-item" :key="i">
                  <a :href="sethref(i)" class="feedhover">{{ i }}</a>
                </li>
              </ul>
            </el-form-item>
          </el-col>
          <el-col :sm="12" :md="12" :lg="12" :xl="12">
            <div class="feedtitle">回执</div>
            <el-form-item label="标题:">
              <span>{{ feedbackform.receiptTitle }}</span>
            </el-form-item>
            <el-form-item label="内容:">
              <div style="max-height: 155px; overflow: auto">
                {{ feedbackform.receiptMessage }}
              </div>
            </el-form-item>
            <el-form-item label="回执人:">
              <span>{{ feedbackform.receiptUserName }}</span>
            </el-form-item>
            <el-form-item label="回执日期:">
              <span>{{ feedbackform.receiptTime }}</span>
            </el-form-item>
            <el-form-item label="附件列表:">
              <ul class="infinite-list" style="overflow: auto">
                <li v-for="i in rlist" class="infinite-list-item" :key="i">
                  <a :href="sethref(i)" class="feedhover">{{ i }}</a>
                </li>
              </ul>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getflist, del, editf, addf } from "@/api/feedback.js";
import openMixin from "@/mixins/open.js";
import queryMixin from "@/mixins/countquery.js";
import { handleCofirm } from "@/utils/confirm";
export default {
  data() {
    return {
      listquery: {
        pageSize: 10,
        currentPage: 1,
        ListType: null,
        key: "",
        startDate: null,
        endDate: null,
      },
      dialogStatus: "add",
      isloading: false,
      tableData: [],
      form: {},
      flist: [],
      rlist: [],
      feedbackform: {},
      isDialogShow: false,
      receptDialogShow: false,
      valueData: [],
      fileList: [],
      files: [],
    };
  },
  mounted() {
    this.getdata();
  },
  mixins: [openMixin, queryMixin],

  methods: {
    search() {
      this.listquery.currentPage = 1;
      this.listquery.pageSize = 10;
      this.getdata();
    },
    reset() {
      this.listquery = {
        pageSize: 10,
        currentPage: 1,
        ListType: "3",
        key: "",
        startDate: null,
        endDate: null,
      };
    },
    addquestion() {
      let data = new FormData();
      this.files.forEach((element) => {
        data.append("upFeedbackFiles", element);
      });
      Object.keys(this.feedbackform).map((k) => {
        let v = this.feedbackform[k];
        data.append(k, v);
      });
      data.delete("feedbackTime");
      addf(data)
        .then((v) => {
          this.getdata();
          this.$notify({
            title: "成功",
            message: "反馈发送成功",
            type: "success",
          });
          this.isDialogShow = false;
        })
        .catch((error) => {
          this.$notify.error({
            title: "反馈发送失败",
            message: error,
          });
        });
    },
    updateData() {
      let data = new FormData();
      this.files.forEach((element) => {
        data.append("upFeedbackFiles", element);
      });
      Object.keys(this.feedbackform).map((k) => {
        let v = this.feedbackform[k];
        data.append(k, v);
      });
      data.set("feedbackFiles", this.flist.toString());
      data.delete("feedbackTime");
      editf(data)
        .then((v) => {
          this.getdata();
          this.$notify({
            title: "成功",
            message: "修改成功",
            type: "success",
          });
          this.files = [];
          this.fileList = [];
          this.isDialogShow = false;
        })
        .catch((error) => {
          this.$notify.error({
            title: "修改发生错误",
            message: error,
          });
        });
    },
    addcityquestion() {
      this.feedbackform = {
        feedbackTitle: "",
        feedbackMessage: "",
      };
      this.files = [];
      this.fileList = [];
      this.rlist = [];
      this.dialogStatus = "add";
      this.isDialogShow = true;
    },
    editquestion(row) {
      this.feedbackform = Object.assign({}, row);
      this.dialogStatus = "edit";
      this.flist = [];
      if (row.feedbackFiles) {
        this.flist = row.feedbackFiles.split(",").map((v) => {
          return v;
        });
      }
      this.isDialogShow = true;
    },
    searchquestion(row) {
      this.feedbackform = Object.assign({}, row);
      this.rlist = [];
      if (row.receiptFiles) {
        this.rlist = row.receiptFiles.split(",").map((v) => {
          return v;
        });
      }
      this.receptDialogShow = true;
    },

    opendialog(row) {},
    handleDelete(id) {
      handleCofirm("确认要删除吗？", "warning").then((res) => {
        del(id)
          .then((v) => {
            this.getdata();
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
            });
          })
          .catch((error) => {
            this.$notify.error({
              title: "错误",
              message: error,
            });
          });
      });
    },
    fileSubmit(data) {
      this.files.push(data.file);
    },
    fileRemove(file, fileList) {
      this.files = [];
    },
    fileChange() {},
    closeli(item) {
      this.flist.remove(item);
    },
    async getdata() {
      if (this.valueData !== null) {
        this.listquery.startDate = this.valueData[0];
        this.listquery.endDate = this.valueData[1];
      } else {
        this.listquery.startDate = null;
        this.listquery.endDate = null;
      }
      let res = await getflist(this.listquery);
      this.tableData = res.data.content;
      this.total = res.data.totalElements;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../public/css/table.scss";
.feedtitle {
  padding: 10px 0px;
  border-bottom: 1px dashed #ccc;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 18px;
  color: #4778c7;
}
.feedhover {
  font-weight: 700;
}
.infinite-list li {
  display: flex;
  justify-content: space-between;
}
.feedhover:hover {
  color: #4778c7;
}
.header {
  line-height: 35px;
  margin-right: 5px;

  i {
    color: #4778c7;
    margin-right: 5px;
  }
}
.more {
  color: #4cc8c7;
  margin-left: 10px;
  &:hover {
    color: orange;
  }
}
.close {
  color: red;
}
.tableheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
}

.over-header {
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 15px;

  .header {
    border-bottom: 1px dashed #ccc;
  }

  .search {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
  }
}
</style>